<template>
  <div>
    <div class="mt-2 mb-2 pointer" style="text-align:right;" @click="standardMode">标准模式</div>
    <div class="editarea" :class="{'editareaSmall':!editorState}">
      <p>输入您想要执行的SQL代码</p>
    </div>
    <div class="mt-2 mb-3 editorbtn">
      <div>执行SQL代码</div>
      <div v-if="editorState" @click="editorState=false">收起编辑器<i class="ri-arrow-up-s-line"></i></div>
      <div v-else @click="editorState=true">展开编辑器<i class="ri-arrow-down-s-line"></i></div>
    </div>
    <div>
      <h4 class="card-title">为您找到相关结果约100,000,000个，耗费0.12秒</h4>
      <div class="table-responsive">
        <b-table
          class="table-centered"
          :items="ordersData"
          :fields="fields"
          responsive="sm"
          :per-page="perPage"
          :current-page="1"
          thead-class="thead-light"
        >
          <template v-slot:cell(title)="row">
            <a href="/#/datahouse/infoDetail">{{row.value}}</a>
          </template>
          <template v-slot:cell(url)>
            <a href="/">查看</a>
          </template>
        </b-table>
      </div>
      <div class="row">
        <div class="col">
          <div class="dataTables_paginate paging_simple_numbers float-right">
            <ul class="pagination pagination-rounded mb-0">
              <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      editorState: true,
      ordersData: [
        {
          title: "向海而生 生机勃勃 海南商报掌政通传媒集团挂牌成立",
          abstract: "财经",
          source: "椰网",
          date: "21分钟前",
          url: "",
        }
      ],
      totalRows: 10,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "title", label: "标题" },
        { key: "abstract", label: "摘要" },
        { key: "source", label: "来源" },
        { key: "date", label: "日期" },
        { key: "url", label: "原文地址" }
      ],
    }
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发分页");
      }
    }
  },
  methods: {
    standardMode(){
      this.$emit("changeMode",true)
    }
  }
}
</script>
<style lang="scss" scoped>
.editarea{
  line-height: 200px;
  text-align: center;
  border: 1px solid #cccccc;
}
.editorbtn{
  display:flex;
  justify-content: space-between;
  div{
    cursor: pointer;
  }
}
.editareaSmall{
  height: 30px;
  overflow: hidden;
}
</style>
